<template>
  <view class="viewport">
    <!-- 搜索框 -->
    <view class="search">
      <view class="input">
        <text class="icon-search">女靴</text>
      </view>
    </view>
    <!-- 分类 -->
    <view class="categories">
      <!-- 左侧：一级分类 -->
      <scroll-view class="primary" scroll-y>
        <view
          v-for="(item, index) in categoryList"
          :key="item.itemSaleClassId"
          class="item"
          :class="{ active: index === activeIndex }"
          @tap="onClickCategory(index)"
        >
          <text class="name">
            {{ item.itemSaleClassName }}
          </text>
        </view>
      </scroll-view>
      <!-- 右侧：二级分类 -->
      <scroll-view enable-back-to-top class="secondary" scroll-y>
        <!-- 内容区域 -->
        <view
          class="panel"
          v-for="item in categoryDetail?.childrenList"
          :key="item.itemSaleClassId"
        >
          <view class="title">
            <text class="name">{{ item.itemSaleClassName }}</text>
            <!-- <navigator class="more" hover-class="none">全部</navigator> -->
          </view>
          <view class="section">
            <navigator
              v-for="goods in item.itemSales"
              :key="goods.itemSaleChannelId"
              class="goods"
              hover-class="none"
              :url="`/pages/goods/goods?id=${goods.itemSaleChannelId}`"
            >
              <image class="image" :src="getMainImage(goods.mainImage)"></image>
              <view class="name ellipsis">{{ goods.itemSaleChannelName }}</view>
              <view class="price">
                <text class="symbol">¥</text>
                <text class="number">{{ goods.itemSalePrice }}</text>
              </view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'
import { listItemSaleClass, selectItemSaleClassById } from '@/services/itemSaleClass'
import type { ItemSaleClass } from '@/types/itemSaleClass'
import { useBranchStore } from '@/stores'

// 门店Store
const branchStore = useBranchStore()
// 获取分类列表数据
const categoryList = ref<ItemSaleClass[]>([])
const categoryDetail = ref<ItemSaleClass>()
const activeIndex = ref(0)
const getCategoryTopData = async () => {
  const res = await listItemSaleClass({ parentId: 0 })
  categoryList.value = res.data
  let itemSaleClassId = categoryList.value[activeIndex.value].itemSaleClassId
  getCategoryDetailData(itemSaleClassId)
}
const getCategoryDetailData = async (itemSaleClassId: number) => {
  const res = await selectItemSaleClassById(itemSaleClassId, branchStore.branch.sysBranchId)
  categoryDetail.value = res.data
}
function onClickCategory(index: number) {
  activeIndex.value = index
  let itemSaleClassId = categoryList.value[activeIndex.value].itemSaleClassId
  getCategoryDetailData(itemSaleClassId)
}

// 首图
const getMainImage = computed(() => (mainImage: string) => {
  return mainImage.split(',')[0]
})

// 页面加载
onLoad(async () => {
  await Promise.all([getCategoryTopData()])
})
</script>

<style lang="scss">
@import './styles/category.scss';
</style>
